<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <base href="<%=request.getContextPath()%>/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/echarts/echarts.min.js"></script>
    <script src="static/echarts/dark.js"></script>
    <style>
        .echarts-group {
            height: 50vh;
        }

        .echarts-group .echarts-info {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6 echarts-group">
        <div class="echarts-info" id="bar"></div>
    </div>
    <div class="layui-col-md6 echarts-group">
        <div class="echarts-info" id="radar"></div>
    </div>
    <div class="layui-col-md6 echarts-group">
        <div class="echarts-info" id="line"></div>
    </div>
    <div class="layui-col-md6 echarts-group">
        <div class="echarts-info" id="pie"></div>
    </div>
</div>
</body>
<script>
    const barChart = echarts.init(document.getElementById("bar"), 'dark');
    $.ajax({
        url: "admin/echarts/bar",
        method: "get",
        dataType: "json",
        success(res) {
            if (res.code === 200) {
                const xData = res.data.articleList.map(item => item.text)
                const yData1 = res.data.articleList.map(item => item.count)
                const yData2 = res.data.commentList.map(item => item.count)
                barChart.setOption({
                    title: {
                        text: '文章和评论统计'
                    },
                    tooltip: {},
                    legend: {
                        data: ['文章', '评论']
                    },
                    xAxis: {
                        data: xData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '文章',
                            type: 'bar',
                            data: yData1
                        }, {
                            name: "评论",
                            type: 'bar',
                            data: yData2
                        }
                    ]
                })
            } else {
                layer.alert(res.msg, {icon: 6})
            }
        },
        error(e) {
            layer.alert('服务器连接异常...', {icon: 6})
            console.log(e)
        }
    })

    const lineChart = echarts.init(document.getElementById("line"), 'dark');
    $.ajax({
        url: "admin/echarts/line",
        method: "get",
        dataType: "json",
        success(res) {
            if (res.code === 200) {
                const xData = res.data.map(item => item.text)
                const yDate = res.data.map(item => item.count)
                lineChart.setOption({
                    title: {
                        text: '新增会员趋势'
                    },
                    xAxis: {
                        type: 'category',
                        data: xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    legend: {
                        data: ['用户量']
                    },
                    tooltip: {},
                    series: [
                        {
                            data: yDate,
                            name: "用户量",
                            type: 'line'
                        }
                    ]
                })
            } else {
                layer.alert(res.msg, {icon: 6})
            }
        },
        error(e) {
            layer.alert('服务器连接异常...', {icon: 6})
            console.log(e)
        }
    })


    const pieChart = echarts.init(document.getElementById("pie"), 'dark');
    $.ajax({
        url: "admin/echarts/pie",
        method: "get",
        dataType: "json",
        success(res) {
            if (res.code === 200) {
                const pieData = res.data.map(item => {
                    return {
                        value: item.count,
                        name: item.text
                    }
                })
                pieChart.setOption({
                    title: {
                        text: '分类占比图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '分类占比',
                            type: 'pie',
                            radius: '50%',
                            data: pieData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            } else {
                layer.alert(res.msg, {icon: 6})
            }
        },
        error(e) {
            layer.alert('服务器连接异常...', {icon: 6})
            console.log(e)
        }
    })

    const radarChart = echarts.init(document.getElementById("radar"), 'dark');
    $.ajax({
        url: "admin/echarts/radar",
        method: "get",
        dataType: "json",
        success(res) {
            if (res.code === 200) {
                radarChart.setOption({
                    title: {
                        text: '网站统计图'
                    },
                    legend: {
                        data: res.data.legendTitle
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    radar: {
                        radius: 120,
                        // shape: 'circle',
                        indicator: res.data.indicator
                    },
                    series: [
                        {
                            name: '网站数据雷达图',
                            type: 'radar',
                            data: res.data.seriesData
                        }
                    ]
                })
            } else {
                layer.alert(res.msg, {icon: 6})
            }
        },
        error(e) {
            layer.alert('服务器连接异常...', {icon: 6})
            console.log(e)
        }
    })

</script>
</html>
